<%@page import="com.zkingsoft.pojo.ElementTypeFactory"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="/resource/UserPwoer.tld" prefix="pwoer"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	pageContext.setAttribute("fnId", request.getAttribute("fnId"));
	pageContext.setAttribute("userPwoer", request.getSession().getAttribute("userPwoer"));
	//获取元素类型
	pageContext.setAttribute("list", ElementTypeFactory.getElements());
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="${path }/resource/plugin/hui/lib/html5.js"></script>
<script type="text/javascript" src="${path }/resource/plugin/hui/lib/respond.min.js"></script>
<script type="text/javascript" src="${path }/resource/plugin/hui/lib/PIE_IE678.js"></script>
<![endif]-->

<!-- 本框架基本脚本和样式 -->
<link href="${path }/resource/plugin/hui/skin/default/skin.css"
	rel="stylesheet" type="text/css" id="skin" />
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/EXBase.js"></script>

<!-- 界面单独引入的其他样式和脚本 -->
<link rel="stylesheet"
	href="${path }/resource/plugin/hui/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"
	src="${path }/resource/plugin/hui/lib/zTree/v3/js/jquery.ztree.core-3.5.js"></script>

<!-- 自定义css和js -->
<link href="${path }/resource/css/treeLayout.css" rel="stylesheet"
	type="text/css">



<link rel="stylesheet"
	href="${path }/resource/plugin/kindeditor/themes/default/default.css" />
<link rel="stylesheet"
	href="${path }/resource/plugin/kindeditor/plugins/code/prettify.css" />
<script src="${path }/resource/plugin/kindeditor/kindeditor.js"></script>
<script src="${path }/resource/plugin/kindeditor/lang/zh_CN.js"></script>
<script
	src="${path }/resource/plugin/kindeditor/plugins/code/prettify.js"></script>

<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>

<![endif]-->
<title>PC导航列表</title>
</head>
<body style="height: 100%; overflow: hidden;">

	<nav class="breadcrumb">
		<i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>门户管理
		<span class="c-gray en">&gt;</span> 文章PC导航管理 <a
			class="btn btn-success radius r mr-20 size-S"
			style="line-height: 1.6em; margin-top: 3px"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="Hui-iconfont">&#xe68f;</i></a>
	</nav>
	<div class="panal-l">
		<div class="pd-10" style="overflow: hidden;">
			<span class="f-l f-18">列表</span>
			<pwoer:btn value="add">
				<a class="f-r" onclick="openForm()"><i
					class="fa fa-plus c-success"></i> 添加PC导航</a>
			</pwoer:btn>
		</div>

		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>

	</div>

	<div class=" panal-r ">

		<form style="display: none;"
			class="form form-horizontal responsive dataform"
			action="admin/nav/addOrModify" id="dataform">
			<legend>PC导航编辑</legend>
			<input type="hidden" name="id" id="navId">
			<div class="row cl">
				<label class="form-label col-1">父级PC导航</label>
				<div class="formControls col-3">
					<select class="select select-box" size="1" name="parentId"
						id="parentId">

					</select>
				</div>
				<div class="col-1">
					<span class="Validform_checktip"></span>
				</div>
				<label class="form-label col-1">导航名称</label>
				<div class="formControls col-3">
					<input id="name" type="text" name="name" class="input-text "
						datatype="*1-50" nullmsg="导航名称不能为空">
				</div>
				<div class="col-1">
					<span class="Validform_checktip"></span>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-1">类型</label>
				<div class="formControls col-3">
					<select class="select select-box" size="1" name="type" id="type"
						onchange="selectType(this)">
						<option value="self">自定义</option>
						<c:forEach items="${list }" var="item">
							<option value='${item.value }'>${item.name }</option>
						</c:forEach>
					</select>
				</div>
				<div class="col-1">
					<span class="Validform_checktip"></span>
				</div>
				<label class="form-label col-1">url</label>
				<div class="formControls col-3" id="url"></div>
				<div class="col-1">
					<span class="Validform_checktip"></span>
				</div>
			</div>
			<div class="row cl">

				<label class="form-label col-1">描述</label>
				<div class="formControls col-3">
					<input name="description"  type="text" id="description" 
						class="input-text ">
				</div>
				<div class="col-1">
					<span class="Validform_checktip"></span>
				</div>
				
				<label class="form-label col-1">排序</label>
				<div class="formControls col-3">
					<input name="orderby" type="text" datatype="n" id="orderby"  
						class="input-text " >
				</div>
				<div class="col-1">
					<span class="Validform_checktip"></span>
				</div>
				
			</div>
			<div class="row cl">
				<label class="form-label col-1">展示图片</label>

				<div class="formControls col-9">
					<span class="btn-upload form-group"> <input
						onclick="EXCommon.chooesFile()"
						class="input-text upload-url radius" type="text" id="showFileName"
						readonly> <a onclick="EXCommon.chooesFile()"
						class="btn btn-primary radius"><i class="fa fa-cloud-upload"></i>
							浏览文件</a>
					</span> <input type="button" class='btn btn-primary radius'
						onclick="EXCommon.upFile()" value="上传"> <a
						id="selectInServices" class="btn btn-primary radius"><i
						class="fa fa-cloud"></i> 远程图库</a>
				</div>
			</div>
			<div class="row cl">
				<div class="col-1"></div>
				<div class="col-md-offset-1 formControls col-9">
					<input type="hidden" name="inco" id="hiddenImg" /> <img
						width="150" id='img_1' />
				</div>
			</div>
			<div class="row cl mt-40">
				<div class="col-12 text-c">
					<pwoer:btn value="edit">
						<a class="btn btn-success radius" onclick="updateFunction()">保存</a>
					</pwoer:btn>
					<pwoer:btn value="del">
						<a class="btn btn-danger  radius" onclick="delFunction()">删除</a>
					</pwoer:btn>
				</div>
			</div>
		</form>

		<form class="form form-horizontal" method="post"
			style="display: none;" enctype="multipart/form-data"
			target="blankFrame"
			action="${path }/resource/plugin/kindeditor/upload_json.jsp?dir=image&flag=img_1&hiddenImg=hiddenImg">
			<input id="fileText" type="file" multiple name="file-1"
				onchange="EXCommon.selectFile('#showFileName')" /> <input
				type="submit" id="submitBtn"
				onclick="EXCommon.upolad('img_1','file_1')" />
		</form>
		<iframe src="" name="blankFrame" id="blankFrame"
			style="height: 100px; width: 100px; display: none;"> </iframe>

	</div>
	<script type="text/javascript">
		var Huiform = null;
		$(function() {
			initFunctionList();
			Huiform = $(".dataform").Validform({
				tiptype : 2,
			}); 
			EXUI.openServiceImgSpace(function(url) {
				$("#img_1").attr("src", url).show();
				$("#hiddenImg").val(url);
			}, "#selectInServices");
		});

		/**
		 * 初始化PC导航列表
		 */
		function initFunctionSelected(id) {
			$.AjaxProxy({
			
				a : false,
				c : false
			}).invoke("admin/nav/all", function(loj) {
				$("#parentId").createSelectTree(loj.attr("result").dataList, {
					append : false,
					defaultValue : id
				});
			});

		}

		function initFunctionList() {
			var zNodes = new Array();
			$.AjaxProxy({p:{plat:1}}).invoke(
					"admin/nav/all",
					function(loj) {
						for (var i = 0; i < loj.getRowCount(); i++) {
							zNodes[i] = createNode(loj.getString(i, "id"), loj
									.getString(i, "parentId"), loj.getString(i,
									"name"));
						}
						initTree(zNodes);
					});
		}

		function updateFunction() {
			EXForm.initForm({
				refresh : function() {
					location.replace(location.href);
				}
			});
			EXForm.submit();
		}

		function initTree(zNodes) {
			var setting = {
				view : {
					dblClickExpand : false,
					showLine : false,
					selectedMulti : false
				},
				data : {
					simpleData : {
						enable : true,
						idKey : "id",
						pIdKey : "pId",
						rootPId : ""
					}
				},
				callback : {
					onClick : zTreeOnClick
				}
			};
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		}

		// 点击加载节点信息
		function zTreeOnClick(event, treeId, treeNode) {
			$("#dataform").show();
			$.AjaxProxy({
				p : {
					id : treeNode.id
				},
				a : false,
				c : true
			}).invoke("admin/nav/findById", function(loj) {
				// 初始化PC导航基本信息
				initFunctionSelected(loj.getString(0, "parentId"));
				$("#navId").val(loj.getString(0, "id"));
				$("#name").val(loj.getString(0, "name"));
				$("#orderby").val(loj.getString(0, "orderby"));
				$("#hiddenImg").val(loj.getString(0, "inco"));
				$("#img_1").attr("src", loj.getString(0, "inco"));
				$("#description").val(loj.getString(0, "description"));
				var elementId = null;
				var url = loj.getString(0, "url");
				if (loj.getString(0, "type") != "self") {
					elementId = url.substring(url.indexOf("="), url.length);
				} else {
					elementId = url;
				}
				setSelect(elementId, loj.getString(0, "type"));
			});
		};
		//设置类型控件
		function setSelect(id, type) {
			var node = $("#url");
			//设置类型选择
			$("#type").find("option").each(function() {
				var value = $(this).val();
				if (type == value) {
					$(this).attr("selected", "selected");
				}
			});

			//设置url值的选择方式
			//类型不是自定义
			if (type == "self") {
				node
						.html('<input datatype="*1-500" name="url" type="text" value="'+id+'"  class="input-text"> ');
				return;

				//类型是自定义
			} else {
				node
						.html('<select class="select select-box" size="1" name="url" id="urlselect"> </select> ');
				$.AjaxProxy({
					a : false,
					c : false
				}).invoke(
						"admin/nav/getCate?type=" + type,
						function(loj) {
							$("#urlselect").createSelectTree(
									loj.attr("result").dataList, {
										append : true,
										defaultValue : id
									});
						});
			}

		}

		function createNode(id, parentId, name) {
			var o = new Object();
			o.id = id;
			o.pId = parentId;
			o.name = name;
			return o;
		}
		function showIcon() {
			layer.open({
				type : 2,
				title : "选择图标",
				area : [ '80%', '80%' ],
				fix : true, // 不固定
				maxmin : true,
				content : '${path}/common/redirect/icons'
			});
		}

		function delFunction() {
			var id = $("#navId").val();
			if (id != null && id != '') {
				layer
						.confirm('删除PC导航时会删除该PC导航的所有子PC导航！', {
							icon : 3,
							title : '提示'
						},
								function(index) {
									layer.close(index);
									if ($("#parentId").find("option:selected")
											.text() == "| ROOT") {
										layer.alert("ROOT节点不能被删除", {
											icon : 2
										});
										return false;
									}
									var id = $("#navId").val();
									$.AjaxProxy({
										p : {
											keys : id
										}
									}).invoke("admin/nav/del", function(loj) {
										layer.alert('删除成功！', {
											icon : 1
										}, function(index) {
											$("#dataform").hide();
											layer.close(index);
											initFunctionList();
										});
										return false;
									});
								});
			} else {
				layer.alert("请先选中要删除的PC导航！");
			}
		}

		function openForm() {
			layer.open({
				type : 2,
				title : "新增PC导航",
				area : [ EXUI.SIZE_L, '600px' ],
				fix : true, // 不固定
				maxmin : true,
				content : '${path}/admin/nav/editForm?plat=1'
			});
		}
		
		/**
		当用户改变导航类型的时候联动url控件的改变
	 */
	function selectType(select) {
		var node = $("#url");
		var type = "";
		if (select.value == 'article') {
			//文章
			type = "article";
		} else if (select.value == 'product') {
			//产品
			type = "product";
		} else if (select.value == 'album') {
			//相册
			type = "album";
		} else if (select.value == 'vodoe') {
			//视频
			type = "vidoe";
		} else if (select.value == 'self') {
			node
					.html('<input datatype="url" name="url" type="text" class="input-text "> ');
			return;
		}
		node
				.html('<select class="select select-box" size="1" name="url" id="urlselect"> </select> ');
		$.AjaxProxy({
			a : false,
			c : false
		}).invoke("admin/nav/getCate?type=" + type, function(loj) {
			$("#urlselect").createSelectTree(loj.attr("result").dataList, {
				append : true
			});
		});
	}
	</script>
</body>
</html>